<template>
  <div class="box-rank">
    <div class="title">
      <p>热门景区排行</p>
      <p class="bg"></p>
    </div>
    <div ref="rankChart" class="charts" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, reactive, ref } from 'vue'

// 获取 DOM 节点
const rankChart = ref()

const column1 = reactive([
  {
    type: 'text',
    left: '20', // 左边距10px
    top: '15', // 上边距40px（标题下移）
    style: {
      text: '排名',
      fontSize: 16,
      fill: '#ffb700',
    },
  },
  {
    type: 'text',
    left: '120', // 左边距10px
    top: '15', // 上边距40px（标题下移）
    style: {
      text: '景区',
      fontSize: 16,
      fill: '#ffb700',
    },
  },
  {
    type: 'text',
    left: '300', // 左边距10px
    top: '15', // 上边距40px（标题下移）
    style: {
      text: '预约数量',
      fontSize: 16,
      fill: '#ffb700',
    },
  },
  {
    type: 'text',
    left: '15', // 左边距10px
    top: '65', // 上边距40px（标题下移）
    style: {
      text: 'NO.1',
      fontSize: 16,
      fill: '#007afe',
    },
  },
  {
    type: 'text',
    left: '15', // 左边距10px
    top: '115', // 上边距40px（标题下移）
    style: {
      text: 'NO.2',
      fontSize: 16,
      fill: '#ff4500ad',
    },
  },
  {
    type: 'text',
    left: '15', // 左边距10px
    top: '165', // 上边距40px（标题下移）
    style: {
      text: 'NO.3',
      fontSize: 16,
      fill: '#00ced1ff',
    },
  },
  {
    type: 'text',
    left: '15', // 左边距10px
    top: '215', // 上边距40px（标题下移）
    style: {
      text: 'NO.4',
      fontSize: 16,
      fill: '#ffb700',
    },
  },
  {
    type: 'text',
    left: '15', // 左边距10px
    top: '265', // 上边距40px（标题下移）
    style: {
      text: 'NO.5',
      fontSize: 16,
      fill: '#c71585ff',
    },
  },
])

const column2 = reactive([
  {
    type: 'text',
    left: '85', // 左边距10px
    top: '65', // 上边距40px（标题下移）
    style: {
      text: '内蒙古大草原',
      fontSize: 16,
      fill: '#fff',
    },
  },
  {
    type: 'text',
    left: '85', // 左边距10px
    top: '115', // 上边距40px（标题下移）
    style: {
      text: '稻城亚丁',
      fontSize: 16,
      fill: '#fff',
    },
  },
  {
    type: 'text',
    left: '85', // 左边距10px
    top: '165', // 上边距40px（标题下移）
    style: {
      text: '万里长城',
      fontSize: 16,
      fill: '#fff',
    },
  },
  {
    type: 'text',
    left: '85', // 左边距10px
    top: '215', // 上边距40px（标题下移）
    style: {
      text: '九寨沟',
      fontSize: 16,
      fill: '#fff',
    },
  },
  {
    type: 'text',
    left: '85', // 左边距10px
    top: '265', // 上边距40px（标题下移）
    style: {
      text: '桂林漓江',
      fontSize: 16,
      fill: '#fff',
    },
  },
])
// 组件挂载完毕
onMounted(() => {
  const myRankChart = echarts.init(rankChart.value)
  // 设置配置项
  myRankChart.setOption({
    graphic: [
      {
        type: 'rect', // 矩形作为表格的行或列背景
        left: 'center',
        top: 'middle',
        style: {
          fill: 'transparent', // 透明背景，便于显示文字边框
        },
      },
      // 添加列标题和行数据（示例）
      ...column1,
      ...column2,
    ],
    tooltip: {},
    legend: {
      show: false,
      data: ['排行'],
    },
    xAxis: {
      type: 'value',
      max: 100, // 最大数值
      show: false,
    },
    yAxis: {
      type: 'category',
      show: false,
      // 轴线的设置
      axisLine: {
        show: false,
        // Y 轴刻度文字样式
        lineStyle: {
          color: '#fff',
        },
      },
      // 轴线刻度
      axisTick: {
        show: false,
      },
      data: ['峨眉山', '稻城亚丁', '九寨沟', '万里长城', '内蒙古大草原'],
    },
    series: [
      {
        type: 'bar',
        stack: 'total',
        showBackground: true, // 背景色
        barWidth: 25, // 柱条的宽度
        backgroundStyle: {
          color: '#11144e', // 北京颜色
          borderWidth: 0.3,
          borderColor: '#29fcff',
          borderRadius: 20, // 背景圆角
        },
        label: {
          show: true,
          algin: 'left',
          formatter: (params) => Math.round(params.value) + '%',
        },
        emphasis: {
          focus: 'series',
        },
        data: [
          {
            value: 30,
            itemStyle: {
              color: '#c71585ff',
              borderRadius: 20,
            },
          },
          {
            value: 40,
            itemStyle: {
              color: '#ffb700',
              borderRadius: 20,
            },
          },
          {
            value: 50,
            itemStyle: {
              color: '#00ced1ff',
              borderRadius: 20,
            },
          },
          {
            value: 60,
            itemStyle: {
              color: '#ff4500ad',
              borderRadius: 20,
            },
          },
          {
            value: 80,
            itemStyle: {
              color: '#007afe',
              borderRadius: 20,
            },
          },
        ],
      },
    ],
    grid: {
      top: 50,
      left: 230,
      right: 30,
      bottom: 0,
    },
  })
})
</script>

<style lang="scss" scoped>
.box-rank {
  background: url('../../images/dataScreen-main-rt.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  .title {
    margin-left: 10px;
    color: white;
    font-size: 20px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .charts {
    height: calc(100% - 80px);
    margin-top: 30px;
    background: url('../../images/rankingChart-bg.png') no-repeat;
    background-size: 100%;
    // background-color: #bfa;
  }
}
</style>
